<template>
	<s-layout class="set-wrap bg-white" title="">
		<uni-forms class="bg-white" ref="form" :modelValue="state.formData" border>
			<view class="bg-white type-box ss-p-x-20 ss-p-y-30">
				<view class="title ss-m-b-44">请选择科目</view>
				<view class="ss-m-l-12" style="width: 500px;">
					<uni-section title="科目分类" type="line" padding>
						<uni-data-picker
              style="background-color: #ffffff"
              placeholder="选择科目"
              popup-title="选择科目"
              :localdata="state.dataTree"
							v-model="state.classes"
              @change="onchange"
              @nodeclick="onnodeclick"
              @popupopened="onpopupopened"
							@popupclosed="onpopupclosed">
						</uni-data-picker>
					</uni-section>
				</view>
			</view>
			<view class="bg-white ss-p-x-20 ss-p-y-30 ss-m-t-20">
				<view class="title ss-m-b-30"> 相关描述 </view>
				<view class="textarea">
					<uni-easyinput :inputBorder="false" type="textarea" v-model="state.formData.content"
						placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
						placeholder="同学~请描述您遇到的问题，建议上传照片,会有专业老师为您解答!" clearable></uni-easyinput>
					<s-uploader v-model:url="state.formData.images" fileMediatype="image" limit="9" mode="grid"
						:imageStyles="{ width: '168rpx', height: '168rpx' }"></s-uploader>
				</view>
			</view>
			<view class="bg-white ss-p-x-20 ss-p-y-30 ss-m-t-20">
				<view class="title ss-m-b-30"> 联系方式 </view>
				<view class="mobile-box">
					<uni-easyinput :inputBorder="false" type="number" v-model="state.formData.phone" paddingLeft="10"
						placeholder="请输入您的联系电话" />
				</view>
			</view>
		</uni-forms>
		<view class="submit ss-p-x-30 ss-p-y-10 bg-white">
			<button class="submit-btn ss-reset-button ui-BG-Main ui-Shadow-Main" @tap="onSubmit">
				提交
			</button>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive,
		ref,
		unref
	} from 'vue';
	import sheep from '@/sheep';

	const filesRef = ref(null);
	const state = reactive({
		classes: '',
		dataTree: [],

		formData: {
			content: '',
			phone: '',
			images: [],
			category_id: '',
		},
		imageFiles: [],
		current: 0,
	});

	function onnodeclick(e) {
		console.log('onnodeclick',e);
	}

	function onpopupopened(e) {
		console.log('popupopened',e);
	}

	function onpopupclosed(e) {
		console.log('popupclosed', e);
	}

	function onchange(e) {
		console.log('onchange:', e);
		const concatenatedValuesWithSeparator = e.detail.value.reduce((accumulator, currentItem) => {  
		    return accumulator + (accumulator ? ',' : '') + currentItem.value;  
		}, ''); // 注意这里没有初始的逗号，因为我们在拼接时检查accumulator是否为空  
		
		state.formData.category_id = concatenatedValuesWithSeparator
	}
	
	onLoad(async (options) => {
		let res = await sheep.$api.app.getcategorys({
			//content_type: tabMaps[state.currentTab].value,
		});
		if (res.code==1) {
			console.log(res)
			var result = renameNameToText(res.data)
			console.log(result)
			state.dataTree = result
		}
	});
	
	async function onSubmit() {
		console.log(state.formData);
		if (!state.formData.category_id) {
			sheep.$helper.toast('请选择科目');
			return;
		}
		if (!state.formData.content) {
			sheep.$helper.toast('请描述您遇到的问题');
			return;
		}
		if (!state.formData.phone) {
			sheep.$helper.toast('请输入您的联系方式');
			return;
		}

		const {
			code
		} = await sheep.$api.app.addquestion(state.formData);
		if (code === 1) {
			//sheep.$router.back();
			sheep.$router.go('/pages/index/user?path=question');
		}
	}
	
	function renameNameToText(items) {
	    return items.map(item => {  
	        const newItem = { ...item }; // 创建当前对象的浅拷贝  
	        if (newItem.name) {  
	            newItem.text = newItem.name; // 添加新的text属性，并复制name的值  
				newItem.value = newItem.id; // 添加新的text属性，并复制name的值 
	            delete newItem.name; // 删除name属性  
	        }  
	        if (newItem.children && newItem.children.length > 0) {  
				// 过滤掉任何可能的空子对象（虽然在这个特定例子中不是必需的，但可以作为一般性的清理步骤）  
				newItem.children = newItem.children.filter(child => child !== null && typeof child === 'object' && !Array.isArray(child) || (Array.isArray(child) && child.length > 0));  
				// 递归处理非空的children数组  
				newItem.children = renameNameToText(newItem.children); 
	        }  
	        return newItem;  
	    });  
	}  
</script>

<style lang="scss" scoped>
  .page-body{
    background-color: #ffffff;
  }
	::v-deep .selected-item-text-overflow{width: 50% !important;}
	.type-box {
		border-top: 2rpx solid #f9fafb;
	}
  .placeholder{
    background-color: #ffffff !important;
  }

	.data-pickerview {
		height: 300px;
		border: 1px #e5e5e5 solid;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.uni-forms {
		width: 100%;
	}

	.title {
		font-size: 15px;
		font-weight: bold;
		color: #333333;
		line-height: normal;
	}

	:deep() {
		.uni-easyinput__placeholder-class {
			color: #bbbbbb !important;
			font-size: 14px !important;
			font-weight: 400 !important;
			line-height: normal !important;
		}

		.uni-forms-item__label .label-text {
			font-size: 14px !important;
			color: #333333 !important;
			line-height: normal !important;
		}

		.uni-list-item__content-title {
			font-size: 14px !important;
			color: #333333 !important;
			line-height: normal !important;
		}

		.uni-easyinput__content-textarea {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
			margin-top: 4rpx !important;
			padding-left: 20rpx !important;
		}

		.uni-icons {
			font-size: 40rpx !important;
		}

		.icon-del-box {
			width: 32rpx;
			height: 32rpx;
			top: 0;
			right: 0;

			.icon-del {
				width: 24rpx;
			}
		}
	}

	.radio-subtitle {
		font-size: 14px;
		font-weight: 500;
		color: #333333;
		line-height: 42rpx;
	}

	.textarea {
		min-height: 322rpx;
		background: #f9fafb;
		border-radius: 20rpx;
		padding: 20rpx;
		margin: 30rpx 20rpx 46rpx 0;

		.area {
			height: 119px;
			font-size: 13px;
			font-weight: 500;
			color: #333;
			line-height: 25px;
			width: 100%;
		}

		.pl-style {
			font-size: 24rpx;
			color: #b1b3c7;
			font-weight: 500;
		}
	}

	.mobile-box {
		background: #f9fafb;
		border-radius: 5px;
	}
	
	.submit{padding-top: 40px;}
	.submit-btn {
    width: 167px;
    height: 37px;
    border-radius: 5px;
	}

	.kefu-btn {
		width: 167px;
		height: 37px;
		border-radius: 5px;
		background: #eeeeee;
		color: #333333;
	}
</style>